<template>
  <div class="content">
    <div class="tabInfo">
      <div class="search">
        <!-- 搜索按钮操作 -->
        <div class="left">
          <SearchForm :formObj="formObj" :formData="formInline"></SearchForm>
        </div>

        <div class="btn">
          <el-button
            style="color: #fff; background: #007bff"
            @click="addJob"
            v-hasPermi="['system:listener:InitiateAninterview']"
            ><el-icon><Plus /></el-icon>新建</el-button
          >
          <el-button
            style="background: #e5f2ff; color: #007bff"
            @click="setTalent"
            ><el-icon><Tickets /></el-icon>收录人才库</el-button
          >
        </div>
      </div>
      <div class="tabTable">
        <TabTable
          ref="tableDataRef"
          :isShowBtn="true"
          :tableData="tableData"
          :pagination="pagination"
          @handleSelectionChange="handleSelectionChange"
          @handleInfo="handleInfo"
          @handleGetApplication="handleGetApplication"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        >
        </TabTable>
      </div>
    </div>
  </div>
</template>
<script setup>
import TabTable from "../components/tabTable.vue";
import SearchForm from "@/components/searchForm/index.vue";
import {
  searchDepyList,
  jobApplicationList,
  setTalentPoolList,
} from "@/api/recruitment/jobApplication/index.js";
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import { getCommonTableHeight } from "@/utils/commonTableHeight.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const router = useRouter();
const buIdOptions = reactive([]);
const formObj = reactive({
  item: [
    {
      select: true,
      label: "",
      prop: "buId",
      placeholder: "请选择需求部门",
      disabled: false,
      options: buIdOptions,
    },
    {
      input: true,
      label: "",
      prop: "name",
      placeholder: "请输入需求岗位",
      disabled: false,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      className: "el-button-primary",
      clickFun: () => {
        handleQuery();
      },
    },
    {
      type: "primary",
      name: "重置",
      className: "el-button-primary",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});
const formInline = reactive({
  pageNum: 1,
  pageSize: 10,
  buId: null,
  name: null,
  // phase: 0,
});

const resetTabState = () => {
  // 重置表单字段
  Object.keys(formInline).forEach((key) => {
    formInline[key] = "";
  });
  // 重置分页
  formInline.pageNum = 1;
  formInline.pageSize = 10;
  // 重置分页对象
  pagination.page = 1;
  pagination.limit = 10;
  pagination.total = 0;
  // 重新查询
  getJobList();
};

const tableData = ref([]);
const pagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

// const total = ref(0);

const multipleSelection = ref([]);
const tabHeight = ref(0);

// 页面高度
const updateViewportHeight = () => {
  tabHeight.value = getCommonTableHeight();
};
onMounted(() => {
  updateViewportHeight(); // 初始化视口高度
  window.addEventListener("resize", updateViewportHeight); // 监听窗口大小变化
  getDemandDetailsList();
  getJobList();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewportHeight); // 移除监听
});

const getJobList = () => {
  jobApplicationList(formInline).then((res) => {
    if (res.rows && res.rows.length > 0) {
      tableData.value = res.rows;

      pagination.total = res.total;
    } else {
      tableData.value = [];
    }
  });
};
const handleQuery = () => {
  getJobList();
};
const handleRefresh = () => {
  proxy.$refs["searchFormRef"].resetFields();
  getJobList();
};
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();

  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

const sizeChange = (size) => {
  formInline.pageNum = 1;
  formInline.pageSize = size.limit;
  pagination.page = 1;
  pagination.limit = size.limit;
  getJobList();
};
const currentChange = (page) => {
  formInline.pageNum = page.page;
  formInline.pageSize = pagination.limit;
  pagination.page = page.page;
  getJobList();
};

// 新建应聘
const addJob = () => {
  router.push({
    name: "newJobApplication",
  });
};
// 查看
const handleInfo = (row) => {
  router.push({
    name: "jobApplicationView",
    query: {
      id: row.id,
    },
  });
};
// 发起面试
const handleGetApplication = (row) => {
  router.push({
    name: "getApplication",
    query: {
      id: row.id,
    },
  });
};
const handleSelectionChange = (val) => {
  console.log(val, "1111--------: ");
  multipleSelection.value = val;
};
const setTalent = () => {
  // isTakeDown: 0 以收录 1 未收录
  if (multipleSelection.value.length > 0) {
    let idArr = [];
    multipleSelection.value.map((item) => {
      idArr.push(item.id);
    });
    let params = idArr.join(",");
    setTalentPoolList({
      ids: params,
    }).then((res) => {
      if (res.code == 200) {
        ElMessage.success("收录人才库成功");
        proxy.$refs["tableDataRef"].clearSelection();
      }
    });
  } else {
    ElMessage.warning("请选择一条数据再收录人才库");
  }
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn {
  display: flex;
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}
</style>
